<template>
  <div class="container">
    <!-- 顶部信息栏 -->
    <el-row type="flex" justify="space-between" align="middle" class="header-info white-bg">
      <!-- 未处理考勤数量 -->
      <el-col class="untreated-attendance">
        <span>未处理</span>
        <span>{{ tobeTaskCount }}</span>
      </el-col>
      <!-- 操作按钮 -->
      <el-col class="operation-btn">
        <el-button size="medium" @click="onOpenRangeEditor">打卡范围</el-button>
        <el-button type="primary" size="medium" @click="onOpenSettingEditor">设置</el-button>
      </el-col>
    </el-row>

    <!-- 部门筛选选择框 -->
    <el-row type="flex" justify="center" class="department-checkbox white-bg">
      <el-col class="department-title">
        <span>部门：</span>
      </el-col>
      <el-col>
        <el-checkbox-group v-model="checkedDeptIdList" @change="onChangeDepartment">
          <el-checkbox v-for="item in departmentList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>

    <!-- 考勤数据表格 -->
    <el-row v-if="attendanceList.length" class="table-container white-bg">
      <el-table class="attendance-table" :data="attendanceList" border :header-cell-style="{ backgroundColor: '#f8f9fa' }">
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column prop="username" label="姓名" width="120" align="center" />
        <el-table-column prop="workNumber" label="工号" width="120" align="center" />
        <el-table-column prop="departmentName" label="部门" width="120" align="center" />
        <el-table-column prop="mobile" label="手机" width="120" align="center" />
        <el-table-column
          v-for="(item, index) in attendanceList[0].attendanceRecord.length"
          :key="item"
          width="120"
          align="center"
        >
          <template #header>{{ `${monthOfReport} / ${item}` }}</template>
          <template #default="{ row }">
            <div
              :class="{
                'attendance-status': true,
                'success-status': row.attendanceRecord[index].adtStatu === 1,
                'error-status': row.attendanceRecord[index].adtStatu === 2,
                'warning-status': row.attendanceRecord[index].adtStatu === 3 || row.attendanceRecord[index].adtStatu === 4,
                'rest-status': row.attendanceRecord[index].adtStatu === 22,
                'normal-status': [5, 6, 21].includes(row.attendanceRecord[index].adtStatu),
                'vacation-status': [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20].includes(row.attendanceRecord[index].adtStatu)
              }"
              @click="onOpenAttendanceStatusEditor(row.attendanceRecord[index])"
            >
              {{ attendanceStatus[row.attendanceRecord[index].adtStatu] }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination :current-page="searchParams.page" background :total="total" layout="->, prev, pager, next" @current-change="onChangePage" />
    </el-row>

    <!-- 打卡范围编辑弹窗 -->
    <RangeEditor ref="rangeEditorRef" />

    <!-- 打卡设置编辑弹窗 -->
    <SettingEditor ref="settingEditorRef" />

    <!-- 考勤状态编辑弹窗 -->
    <AttendanceStatusEditor ref="attendanceStatusEditorRef" @getAttendanceList="getAttendanceList" />
  </div>
</template>

<script>
import { getDepartmentListAPI } from '@/api/department'
import { getAttendanceListAPI } from '@/api/attendance'
import RangeEditor from './components/RangeEditor.vue'
import SettingEditor from './components/SettingEditor.vue'
import AttendanceStatusEditor from './components/AttendanceStatusEditor.vue'

export default {
  name: 'Attendance',
  components: {
    RangeEditor, // 打卡范围编辑弹窗
    SettingEditor, // 打卡设置编辑弹窗
    AttendanceStatusEditor // 考勤状态编辑弹窗
  },
  data() {
    return {
      departmentList: [], // 部门列表
      checkedDeptIdList: [], // 选中的部门id列表
      // 考勤数据列表搜索参数
      searchParams: {
        page: 1,
        pagesize: 10
      },
      attendanceList: [], // 考勤数据列表
      total: 0, // 考勤数据总条数
      tobeTaskCount: 0, // 待处理的考勤数量
      monthOfReport: 1, // 当前考勤月份
      yearOfReport: 2025, // 当前考勤年份
      dayCount: 30, // 当前月份天数
      attendanceStatus: {
        1: '正常',
        2: '旷工',
        3: '迟到',
        4: '早退',
        5: '外出',
        6: '出差',
        7: '年假',
        8: '事假',
        9: '病假',
        10: '婚假',
        11: '丧假',
        12: '产假',
        13: '奖励产假',
        14: '陪产假',
        15: '探亲假',
        16: '工伤假',
        17: '调休',
        18: '产检假',
        19: '流产假',
        20: '长期病假',
        21: '补签',
        22: '休息',
        99: '-'
      }
    }
  },
  created() {
    // 获取部门列表
    this.getDepartmentList()
    // 获取考勤数据列表
    this.getAttendanceList()
  },
  methods: {
    // 获取部门列表
    async getDepartmentList() {
      this.departmentList = await getDepartmentListAPI()
    },
    // 获取考勤数据列表
    async getAttendanceList() {
      // 将部门id列表拼转换成字符串格式（请求接口要求）
      this.searchParams.deptID = this.checkedDeptIdList.join(',')
      const res = await getAttendanceListAPI(this.searchParams)
      console.log(res)
      // 赋值对应数据
      this.attendanceList = res.data.rows
      this.total = res.data.total
      this.tobeTaskCount = res.tobeTaskCount
      this.monthOfReport = res.monthOfReport
      this.yearOfReport = res.yearOfReport

      this.dayCount = new Date(this.yearOfReport, this.monthOfReport, 0).getDate()
      console.log(this.dayCount)
    },
    // 检索部门发生变换时，重新获取考勤数据列表
    onChangeDepartment() {
      this.getAttendanceList()
    },
    // 分页器切换页码
    onChangePage(page) {
      this.searchParams.page = page
      // 获取新一页的考勤数据列表
      this.getAttendanceList()
    },
    // 打开打卡范围编辑弹窗
    onOpenRangeEditor() {
      this.$refs.rangeEditorRef.open()
    },
    // 打开打卡设置编辑弹窗
    onOpenSettingEditor() {
      this.$refs.settingEditorRef.open()
    },
    // 打开考勤状态编辑弹窗
    onOpenAttendanceStatusEditor(attendanceData) {
      console.log(attendanceData)
      this.$refs.attendanceStatusEditorRef.open(attendanceData)
    }
  }
}
</script>

<style lang="scss" scoped>
.white-bg {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}
.header-info {
  height: 100px;
  .untreated-attendance {
    width: 60px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    span {
      color: #444;
      line-height: 40px;
    }
  }
  .operation-btn {
    text-align: right;
  }
}
.department-checkbox {
  margin: 10px 0;
  padding: 20px 80px;
  line-height: 30px;
  .department-title {
    width: 60px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
  }
}
.table-container {
  .attendance-table {
    width: 100%;
    font-size: 16px;
  }
  .el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .attendance-status {
    cursor: pointer;
  }
  .success-status {
    color: #07c160;
  }
  .warning-status {
    color: #ff9900;
  }
  .error-status {
    color: #ff0000;
  }
  .normal-status {
    color: #222;
  }
  .rest-status {
    color: #777;
  }
  .vacation-status {
    color: #2885ff;
  }
}
</style>
